<template>
  <div class="c-bg-sgray">
    <div class="c-ph24 c-pt24" v-if="dataInfo && dataInfo.length > 0">
      <div v-for="(item,index) in dataInfo" :key="index" class="c-bg-white c-flex-row c-mb24 c-pv24 c-ph24 c-br16" @click="clickGoWordDetail(item.dId)">
        <div class="c-ww120 c-maxh120 c-text-hidden c-br12">
          <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.poster, require('../../../assets/defult270.png'))" alt="">
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-justify-sb">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis2">{{item.name}}</div>
          <div class="c-fs18"><span class="theme-fc">{{item.wordCount}}</span>词</div>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (dataInfo && dataInfo.length > 0)" :noData="dataInfo.length == 0" :noDataText="'暂无相关记录'"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
export default {
  name: "Word",
  components: {
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      is_page: false,
      page: 1,
      limit: 10,
      dataInfo: "",
      isLoading: false,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    getList: function () {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + "dictionary/getDictionaryByUser?page=" + this.page + "&limit=" + this.limit, function (res) {
          if (res.data) {
            if ($this.page == 1) {
              $this.dataInfo = res.data;
            } else {
              let list = res.data;
              $this.dataInfo = $this.dataInfo.concat(list)
            }
          }
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page;
          $this.isLoading = false;
        });
      }
    },
    clickGoWordDetail(dId) {
      this.$routerGo(this, "push", {
        path: "/homePage/word/wordDetail",
        query: {
          dId: dId
        }
      })
    },
    // 下拉加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList()
        }
      })
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的词典", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的词典", "", shareUrl, "");
    },
  },
  activated() {
    setDocumentTitle("我的词典"); // eslint-disable-line
    this.dataInfo = '';
    this.page = 1;
    this.is_page = false;
    this.getList();
    this.isLoading = false;
    this.wechatShare();
    window.addEventListener("scroll", this.windowScrollFunction)
  },
  deactivated() {
    this.is_page = false;
    window.removeEventListener("scroll", this.windowScrollFunction)
  }
};
</script>
